<template>
    <div style="height: 100%;">
      <div class="search">
        <div style="height: 30%">
        </div>
        <div style="height: 30%">
          <el-row>
            <el-col :span="19">
              <el-input v-model="searchText" size="small" class="input-with-select" prefix-icon="el-icon-search" placeholder="搜索"></el-input>
            </el-col>
            <el-col :span="4">
              <el-button @click="openAddFriend()" icon="el-icon-plus" size="small"></el-button>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="friendInfo-list">
        <div v-for="session in sessionList"
          :class="sessionId === session.sessionId ? 'friend-active' : 'friend'" @click="chooseSession(session.sessionId)"
          v-show="showFriend(session.displayName)"
          :style="setDynamicHeight(0.09)">
          <el-row>
            <el-col :span="6">
              <div class="avatar" :style="setDynamicHeight(0.09)">
                <el-avatar class="avatarImg"  shape="square" :size="getProportionHeight(0.05)" :src="config.baseConfig.photoBaseUrl + session.displayPhoto"></el-avatar>
              </div>
            </el-col>
            <el-col :span="18">
              <div class="info" :style="setDynamicHeight(0.09)">
                <div class="info-friendName">
                <span class="info-friendName-name" :style="[{'line-height': getProportionHeight(0.06) + 'px'}, {'font-size': getProportionHeight(0.02) + 'px'}]">
                  {{session.displayName}}
                </span>
                  <span class="info-friendName-date" :style="[{'line-height': getProportionHeight(0.06) + 'px'}, {'font-size': getProportionHeight(0.014) + 'px'}]">
                  {{showTime(session.lastMessageTime)}}
                </span>
                </div>
                <div class="info-chatContent" :style="[{'line-height': getProportionHeight(0.03) + 'px'}, {'font-size': getProportionHeight(0.014) + 'px'}]">
                  <span v-if="session.lastUserId !== 'system'">{{session.lastUserName}}:</span>
                  {{session.lastMessage}}
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
      <div>
        <add-friend ref="addFriend"></add-friend>
      </div>
    </div>
</template>

<script>
  import addFriend from "./addFriend";
  import moment from 'moment'
  export default {
    name: "friendList",
    components: {
      addFriend
    },
    props: {
      pubSessionIdVue: {
        type: Object
      },
      changeSessionId: {
        type: Function,
        default: null
      }
    },
    data () {
      return {
        sessionList: [],
        sessionId: "",
        searchText: ""
      }
    },
    mounted () {

    },
    methods: {
      init() {
      },
      async getSessionList(userId) {
        const paramObj = {userId: userId};
        const result = await this.$api.message.getSessionList(paramObj);
        if (result.code === 0) {
          this.sessionList = result.data;
        } else {
          this.$message.error(result.msg);
        }
      },
      showTime(time) {
        var messageDate = new Date(time);
        if (moment(messageDate).format('YYYY-MM-DD') === moment(new Date()).format('YYYY-MM-DD')) {
          return moment(messageDate).format('HH:mm');
        } else {
          return moment(messageDate).format('YY/MM/DD');
        }
      },
      chooseSession(sessionId) {
        if (this.sessionId !== sessionId) {
          this.sessionId = sessionId;
          this.changeSessionId(sessionId);
          this.pubSessionIdVue.$emit('CHANGE_SESSION_ID', sessionId)
        }
      },
      openAddFriend() {
        this.$refs.addFriend.changeDialogVisible();
      },
      async addMessageBySessionId(sessionId) {
        const paramObj = {
          userId: this.$cookieStore.getCookie("userId"),
          sessionId: sessionId
        };
        const result = await this.$api.message.getSessionBySessionId(paramObj);
        if (result.code === 0) {
          const session = result.data;
          if (session) {
            this.updateSessionList(session);
          }
        } else {
          this.$message.error(result.msg);
        }
      },
      updateSessionList(session) {
        for (let i = 0; i < this.sessionList.length; i++) {
          if (session.sessionId === this.sessionList[i].sessionId) {
            this.sessionList.splice(i, 1);
          }
        }
        const arrTemp = [];
        arrTemp.push(session);
        this.sessionList = arrTemp.concat(this.sessionList);
      },
      showFriend(name) {
        if (!name) {
          return false;
        }
        if (this.searchText === '') {
          return true;
        }
        const reg = RegExp(this.searchText);
        return name.match(reg);
      }
    }
  }
</script>

<style scoped>
  .search {
    height: 10%;
    width: 100%;
    text-align: center;
    background-color: #F7F7F7;
  }
  .friend{

  }
  .friend-active {
    background-color: #C6C6C7;
  }
  .input-with-select {
    width: 90%;
  }
  .search >>>.el-button {
    background: #E2E2E2;
  }
  .avatar {
    height: 100%;
    width: 100%;
    position: relative;
  }
  .info {
    height: 100%;
    width: 100%;
  }
  .info-friendName {
    height: 50%;
    width: 100%;
  }
  .info-friendName-name {
    width: 70%;
    color: #000000;
  }
  .info-friendName-date {
    width: 30%;
    color: #969696;
    float:right;
  }
  .info-chatContent {
    height: 50%;
    color: #969696;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }
  .avatarImg{
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
  }
  .friendInfo-list{
    height: 90%;
    overflow: auto;
  }
  .input-with-select >>>.el-input__inner {
    background-color: #E2E2E2;
  }
  .input-with-select >>> input::-webkit-input-placeholder {
     color: #828282;
   }
  /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    background-color: #F5F5F5;
  }
  /*定义滚动条轨道 内阴影+圆角*/
  ::-webkit-scrollbar-track {
    background-color: #EBE8E7;
  }
  /*定义滑块 内阴影+圆角*/
  ::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: #B4B1B0
  }
</style>
